//引用gulp模块
const gulp = require('gulp'),
  htmlmin = require("gulp-htmlmin"),
  cleanCss = require('gulp-clean-css'),
  sass = require('gulp-sass'),
  autoprefixer = require('gulp-autoprefixer'),
  uglify = require('gulp-uglify'),
  babel = require('gulp-babel'),
  del = require('del'),
  connect = require('gulp-connect'),
  { createProxyMiddleware } = require("http-proxy-middleware")
const paths = {
  html: {
    src: 'src/**/*.html',
    dest: 'dist'
  },
  css: {
    src: 'src/css/**/*.scss',
    dest: 'dist/css'
  },
  js: {
    src: 'src/js/**',
    dest: 'dist/js'
  },
  img: {
    src: 'src/img/**',
    dest: 'dist/img'
  },
  libs: {
    src: 'src/libs/**',
    dest: 'dist/libs'
  },
  ico: {
    src: 'src/favicon.ico',
    dest: 'dist'
  }
}
// 制定delDist任务：删除dist目录
const delDist = () => del('dist')

// 指定html任务：压缩html，从src里把html文件取出来，然后压缩，最后放进dist目录
const html = () => {
  // 路径写法里 **代表所有目录，*代表所有文件
  return gulp.src(paths.html.src)
    .pipe(htmlmin({
      removeComments: true, // 清除HTML注释
      collapseWhitespace: true, // 压缩HTML
      collapseBooleanAttributes: true, // 省略布尔属性的值 <input checked="true"/> ==> <input checked />
      removeEmptyAttributes: true, // 删除所有空格作属性值 <input id="" /> ==> <input />
      removeScriptTypeAttributes: false, // 删除<script>的type="text/javascript"
      removeStyleLinkTypeAttributes: true, // 删除<style>和<link>的type="text/css"
      minifyJS: true, // 压缩页面JS
      minifyCSS: true // 压缩页面CSS 
    }))
    .pipe(gulp.dest(paths.html.dest))
    .pipe(connect.reload())
}

// 制定css任务：先把sass转成css，再加上兼容性前缀，最后压缩css代码
const css = () => {
  return gulp.src(paths.css.src)
    .pipe(sass())
    .pipe(autoprefixer({
      presets: ['@babel/env']
    }))
    // .pipe(cleanCss())
    .pipe(gulp.dest(paths.css.dest))
    .pipe(connect.reload())
}

// 制定js任务：先使用babelES6转成ES5，再压缩混淆js代码
const js = () => {
  return gulp.src(paths.js.src)
    .pipe(babel({
      presets: ['@babel/env']
    }))
    // .pipe(uglify())
    .pipe(gulp.dest(paths.js.dest))
    .pipe(connect.reload())
}

const img = () => {
  return gulp.src(paths.img.src)
    .pipe(gulp.dest(paths.img.dest))
    .pipe(connect.reload())
}
const libs = () => {
  return gulp.src(paths.libs.src)
    .pipe(gulp.dest(paths.libs.dest))
}
const ico = () => {
  return gulp.src(paths.ico.src)
    .pipe(gulp.dest(paths.ico.dest))
}
const server = () => {
  connect.server({
    root: 'dist',//项目的根目录
    port: 1998,
    livereload: true,
    middleware () {
      return [
        // 把前端以api开头的请求代理到
        createProxyMiddleware('/api', {
          target: 'http://quan.lukou.com/api/tabs',
          changeOrigin: true
        })
      ]
    }
  }
  )
}

// module.exports={
//     html,
//     css,
//     js,
//     img,
//     libs
// }
//watch：监听文件改变，当文件发生修改可以重启对应的任务
const watch = () => {
  gulp.watch(paths.html.src, html)
  gulp.watch(paths.js.src, js)
  gulp.watch(paths.css.src, css)
  gulp.watch(paths.img.src, img)
  gulp.watch(paths.libs.src, libs)
}
module.exports.default = gulp.series(delDist, gulp.parallel(html, css, js, libs, img, server, watch, ico))